<template>
  <div class="app-container ContractSurrender" v-loading="fullscreenLoading" element-loading-text="拼命加载中">
    <el-divider content-position="left">基本信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          合同编号：
          <div>{{ form.contarctData.contarctCode }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          管理编号：
          <div>{{ form.contarctData.propertyCode }}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          租户名称：
          <div>{{ form.contarctData.companyName }}</div>
          <!--<div>{{ form.crmCustomer.companyName }}</div>-->
        </div>
      </el-col>
    </el-row>
    <el-divider content-position="left">租赁场地</el-divider>
    <div class="el-row">
      <el-table
        ref="multipleTable"
        :data="form.contarctData.houseInfo"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="所属楼宇">
          <template slot-scope="scope">{{ scope.row.houseFloor.houseBuilder.buildingName }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="所属楼层">
          <template slot-scope="scope">{{ scope.row.houseFloor.floorNum }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="房间名称">
          <template slot-scope="scope">{{ scope.row.roomnumber }}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="收租面积（平方米）">
          <template slot-scope="scope">{{ scope.row.rentarea }}</template>
        </el-table-column>
      </el-table>
    </div>
    <el-divider content-position="left">账单信息</el-divider>
    <div class="el-row">
      <el-table
        ref="multipleTable"
        :data="form.contarctData.houseContarctBills"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="账单日期">
          <template slot-scope="scope">{{ scope.row.contarctPlandate }}</template>
        </el-table-column>
        <el-table-column
          label="账单应收总额">
          <template slot-scope="scope">{{ scope.row.billShould }}</template>
        </el-table-column>
        <el-table-column
          label="账单已收总额">
          <template slot-scope="scope">{{ scope.row.billAlready }}</template>
        </el-table-column>
      </el-table>
    </div>
    <el-divider content-position="left">退租信息</el-divider>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="退租日期" prop="date">
        <el-date-picker
          v-model="form.refundtime"
          type="date"
          placeholder="选择日期"
          :disabled="true">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="费用合计" prop="refundMoney">
        <el-input v-model="form.refundMoney" placeholder="请输入应退费用" :disabled="true">
          <template slot="append">元</template>
        </el-input>
        <div class="hint">正数为应收费用 — — 负数为应退费用</div>
      </el-form-item>
      <el-form-item label="备注（可选）" prop="refundreason">
        <el-input type="textarea" :rows="5" v-model="form.refundreason" placeholder="请输入描述" :disabled="true"/>
      </el-form-item>
      <el-form-item label="存档图片" prop="refundfile">
        <el-image style="margin-left:20px" class="buildingImg" v-for="(v,i) in form.refundfile.split(',')" :src="v" index="i">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-form-item>
      <el-form-item class="footer">
        <el-button @click="cancel">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .ContractSurrender {
    .el-row {
      padding: 0 100px;
    }

    .list-ditem {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #595959;
    }

    .el-form {
      width: 70%;
      margin: 0 auto;
    }

    .el-form-item--medium .el-form-item__label {
      min-width: 100px;
    }

    .el-form-item--medium .el-form-item__content {
      margin-left: 100px !important;
    }

    .hint {
      color: #8C8C8C;
    }

    .footer {
      display: flex;
      justify-content: center;
    }
  }
</style>
<script>
  import {contarctDetailForSettle} from "@/api/contarct/contarct";
  import {addContrctrefund, getAllContrctrefund} from "@/api/contrctrefund/contrctrefund";

  export default {
    name: "ContractSurrender",
    // dicts: ['sys_status', 'contarct_status', 'rent_month_type', 'unit_type'],
    data() {
      return {
        tableData: [],
        queryParams: {},
        total: 1,
        // 表单参数
        form: {
          contarctData: {}
        },
        // 表单校验
        rules: {
          sumFee: [
            {required: true, message: "应收不能为空", trigger: "blur"}
          ],
          sumYsFee: [
            {required: true, message: "已收不能为空", trigger: "blur"}
          ]
        },
        refundMoney: 0,
        fullscreenLoading: true
      };
    },
    created() {
      this.makeDetailForSettle()
    },
    methods: {
      getList() {

      },
      // 提交
      submitForm() {
        this.$router.go(-1);
      },
      // 返回
      cancel() {
        this.$router.go(-1);
      },
      makeDetailForSettle() {
        getAllContrctrefund(this.conductionData.refunContractId)
          .then(response => {
            // console.log("getAllContrctrefund"+JSON.stringify(response))
            this.form = response.data;
            this.fullscreenLoading = false;
          })
      },
      addRefund() {
        const request = {
          contractid: this.form.id,
          refundfile: this.form.refundfile,
          refundreason: this.form.refundreason,
          refundtime: this.form.refundtime,
          refundMoney: this.form.refundMoney,
          ysMoney: this.form.refundMoney > 0 ? this.form.refundMoney : 0,
          ytMoney: this.form.refundMoney < 0 ? this.form.refundMoney : 0,
          customerId: this.form.crmCustomer.id
        }
        addContrctrefund(request).then(response => {
          this.$router.push({
            path: "/contarct/contarctchange"
          })
        })
      }
    }
  };
</script>
